import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Table, Card, Icon, message, Modal, Row, Col, Button } from 'antd';
import styles from './index.less';
import * as apis from '@/services/SystemMgr';
import SetMenu from './components/SetMenu';
import AuthorizedButton from '@/components/AuthorizedButton';

const { confirm } = Modal;
export default class MenuAdministration extends Component {
  constructor() {
    super();
    this.state = {
      loading: false,
      columns: [
        {
          title: '菜单名称',
          dataIndex: 'perName',
          key: 'perName',
          width: '15%',
        },
        {
          title: '类型',
          dataIndex: 'perTypeName',
          key: 'perTypeName',
          width: 50,
          align: 'center',
        },
        {
          title: 'URL',
          dataIndex: 'perUrl',
          key: 'perUrl',
          width: '15%',
        },
        {
          title: '所属应用',
          dataIndex: 'itsApplicationName',
          width: '10%',
          key: 'itsApplicationName',
          align: 'center',
        },
        {
          title: '编码',
          dataIndex: 'perCode',
          width: '15%',
          key: 'perCode',
        },
        {
          title: '状态',
          dataIndex: 'isVaild',
          width: '5%',
          align: 'center',
          key: 'isVaild',
        },
        {
          title: '操作',
          dataIndex: 'active',
          width: '20%',
          key: 'active',
          align: 'center',
          render: (text, record) => this.returnBtns(record),
        },
      ],
      data: [],
    };
  }

  componentDidMount() {
    this.getMenuListData();
  }

  // 递归遍历树状结构
  loopTreeData = DATA => {
    const treeData = [];
    DATA.forEach(value => {
      let perTypeName;
      if (value.perType === '1') {
        perTypeName = '菜单';
      } else if (value.perType === '2') {
        perTypeName = '页面';
      } else if (value.perType === '3') {
        perTypeName = '按钮';
      }
      const obj = {
        id: value.id,
        perName: value.perName,
        perTypeName,
        perType: value.perType,
        perUrl: value.perUrl,
        itsApplicationName: value.itsApplicationName,
        itsApplicationCode: value.itsApplicationCode,
        isVaild: value.isVaild,
        parentCode: value.parentCode,
        perCode: value.perCode,
        sort: value.sort,
      };
      if (value.childMenu && value.childMenu.length > 0) {
        obj.children = this.loopTreeData(value.childMenu);
      }
      treeData.push(obj);
    });
    return treeData;
  };

  // 获取菜单列表的数据
  getMenuListData = async () => {
    const getData = await apis.getSysPermissionTreeUsingGET({ params: {} });
    if (getData && getData.code === 1) {
      this.setState({
        data: this.loopTreeData(getData.data),
        // data: getData.data,
      });
    }
  };

  // 禁止菜单权限
  handleProhibit = record => {
    const that = this;
    const { isVaild, id } = record;
    confirm({
      okText: '确定',
      cancelText: '取消',
      title: `是否${isVaild === '未禁用' ? '禁用' : '启用'}菜单？`,
      content: `确定后菜单状态将更换成${isVaild === '未禁用' ? '已禁用' : '未禁用'}`,
      onOk() {
        that.setState({ loading: true });
        apis.updateEnableSysPermissionUsingPUT({ data: { id } }).then(data => {
          if (data.code === 1) {
            that.setState({ loading: false });
            message.success(data.message);
          }
          that.getMenuListData();
        });
      },
    });
  };

  // 操作
  returnBtns = record => (
    <Row type="flex" justify="center">
      <AuthorizedButton authority="systemConfig_menuManage_add">
        <Col>
          <SetMenu
            upData={() => this.getMenuListData()}
            btnType="link"
            value="新增"
            title="新增菜单"
            record={record}
          />
        </Col>
      </AuthorizedButton>
      <AuthorizedButton authority="systemConfig_menuManage_edit">
        <Col>
          <SetMenu
            upData={() => this.getMenuListData()}
            btnType="link"
            value="编辑"
            title="编辑菜单"
            record={record}
          />
        </Col>
      </AuthorizedButton>
      <AuthorizedButton authority="systemConfig_menuManage_isSate">
        <Col>
          <Button type="link" onClick={() => this.handleProhibit(record)}>
            {record.isVaild === '未禁用' ? '禁 用' : '启 用'}
          </Button>
        </Col>
      </AuthorizedButton>
    </Row>
  );

  render() {
    const { columns, data, loading } = this.state;
    return (
      <div className={styles.menuManage}>
        <PageHeaderWrapper
          breadcrumb={null}
          extra={
            <AuthorizedButton authority="systemConfig_menuManage_add">
              <SetMenu
                btnType="primary"
                value="新增"
                title="新增菜单"
                upData={this.getMenuListData}
              />
            </AuthorizedButton>
          }
        >
          <Card>
            <Table
              rowKey="id"
              bordered
              size="middle"
              pagination={false}
              loading={loading}
              columns={columns}
              dataSource={data}
              scroll={{ y: 467 }}
              defaultExpandAllRows
              expandIcon={props => {
                let text;
                if (props.expanded) {
                  text = 'caret-down';
                } else if (props.record.children) {
                  text = 'caret-right';
                } else {
                  text = 'null';
                }
                return (
                  <Icon
                    type={text}
                    className="expand-row-icon"
                    onClick={e => props.onExpand(props.record, e)}
                    style={{ cursor: 'pointer' }}
                  />
                );
              }}
            />
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}
